<template>
  <div>
    <!-- 具名插槽 -->
    <hasNameSlot :name="cinema">
      <template v-slot:title>
        <div class="movie-title">金刚狼4</div>
      </template>
      
      <template #default>
        <div class="movie-content">电影将在：2025-03-30放映，敬请期待</div>
      </template>

      <template #footer>
        <div class="movie-footer">欢迎您的到来</div>
      </template>
    </hasNameSlot>

    <!-- 作用域插槽 -->
    <scopeSlot>
      <template #default="data">
        <div class="score-item" v-for="item of data.list">
          {{ item.name }} -- {{ item.score }}
          <span v-if="item.score < 60">!!!不及格</span>
        </div>
      </template>
    </scopeSlot>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import hasNameSlot from './hasNameSlot.vue'
import scopeSlot from "./scopeSlot.vue"

let cinema = ref('天河城电影院')
</script>

<style lang="scss" scoped>
.movie-title {
  background: orange;
}
.movie-content {
  font-weight: bold;
}
.move-footer {
  text-align: right;
}

.score-item:nth-child(1) {
  background-color: red;
}
.score-item:nth-child(2) {
  background-color: orange;
}
.score-item:nth-child(3) {
  background-color: green;
}
</style>